<template>
  <ul v-infinite-scroll="load">
    <li class="task-list-item" v-for="(item, index) in data" :key="`${item.id}${data.day}${index}`">
      <div class="circle" :style="{ backgroundColor: `${config[item.taskStatus]?.color}` }" />
      <px-text class="w-100px" truncated>{{ item.taskName }}</px-text>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps(["taskData", "config", "day"]);
const pageNo = ref(1);
const pageSize = ref(5);
const data = computed(() => {
  const taskData = props.taskData || [];
  const tasks = taskData.slice(0, pageNo.value * pageSize.value);
  return tasks;
});
const load = () => {
  if (data.value.length < props.taskData?.length) {
    pageNo.value += 1;
  }
};
</script>
<style lang="scss" scoped>
.task-list-item {
  display: flex;
  align-items: center;
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 22px;
}
.circle {
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>
